<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true" style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="padding: 20rpx 40rpx;color: #333333;">
				<view class="flex-SB">
					<view>血氧状态趋势图</view>
					<!-- <view style="font-size: 20rpx;color: #aaa;"></view> -->
					<view style="font-size: 66rpx;">{{oxygen}}<text style="font-size: 24rpx;margin-left: 6rpx;">%</text></view>
				</view>
					<!-- <view style="font-size: 66rpx;">{{oxygen}}<text style="font-size: 24rpx;margin-left: 6rpx;">%</text></view> -->
			
				<view style="font-size: 20rpx;color: #aaa;">当前血氧 {{lastTime}}</view>
			</view>
			<view style="width: 686rpx;height: 220px;">
				<l-echart ref="tiredChartDetails"></l-echart>
			</view>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="font-size: 30rpx;font-weight: bolder;padding: 30rpx;">
				血氧说明
			</view>
			<view style="color: #A6A6A6;font-size: 28rpx;padding: 0 30rpx 30rpx;    line-height: 1.8;letter-spacing: 2px;">
				<view>血氧饱和度（SaO₂）是指血液中氧合血红蛋白（HbO₂）占可结合血红蛋白总量的百分比，是反映呼吸循环功能的重要指标。研究表明，血氧水平变化与情绪波动、压力反应等心理状态密切相关。</view>
			</view>
		</view>
		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member'])
		},
		components: {
			LEchart,
		},
		data() {
			return {
				lastTime:'',
				oxygen: '-',
				showCal: false,
				dateTime: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				minDate: `${year}-${month}-${date-100}`,
			};
		},
		onLoad(opt) {
			let {
				dateTime
			} = opt;
			this.dateTime = dateTime;
			// this.dateTime = "2025-01-11";
			this.initPage(this.dateTime);
		},
		methods: {
			initPage(dateTime) {
				this.lastTime = '';
				this.oxygen = '-';
				if(this.$refs.tiredChartDetails){
					this.$refs.tiredChartDetails.dispose()
				}
				if(!this.member.imei){
					return this.$toast("请登录后查看您的数据！");
				};
				uni.$u.http.post('/client/watch_health_data/type', {
					imei: this.member.imei,
					type:3,
					date:dateTime
				}).then(res => {
					if(res.status == 500){
						return this.$toast(res.msg||'获取数据失败！');
					}
					if(res.status!=200) return;
					let initdata = [];
					let date = [];
					let data = res.data.oxygen;
					if (data.length) {
						this.lastTime = data[0].time.slice(11, 16);
						this.oxygen = data[0].oxygen;
					}
					for (let i in data) {
						initdata.unshift(data[i].oxygen);
						date.unshift(data[i].time.slice(11, 16))
						// initdata.push(data[i].oxygen);
						// date.push(data[i].time.slice(11, 16))
					}

					this.initTiredChart(initdata, date);
				});
			},
			datechange(e) {
				this.showCal = false;
				let dstr = e.fulldate;
				if (this.dateTime == dstr) {
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initTiredChart(data, date) {
				if (data.length == 0) {
					for (let i = 0; i < 7; i++) {
						data.push(0)
						date.push('')
					}
				}
				let option = {
					color:['#3FE0AC'],
					  tooltip: {
					    trigger: 'axis'
					  },
					xAxis: {
						type: 'category',
						data: date,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color:'#BBBBBB'
						},
					},
					grid: {
						top: 20,
						left: 30,
						right: 40,
						bottom: 30
					},
					yAxis: {
						min:80,
						max:100,
						type: 'value',
						position: 'right',
						axisLine: {
							show: false
						},
						axisLabel: {
							color:'#BBBBBB'
						},
					},
					series: [{
						data: data,
						type: 'bar',
						// symbol: 'circle',
						showBackground: true,
						      backgroundStyle: {
						        color: 'rgba(180, 180, 180, 0.2)'
						      },
						padding: 5,
						smooth: true,
						// showSymbol: false,
					}]
				};
				this.$nextTick(() => {
					this.$refs.tiredChartDetails.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>